<template>
	<view class="body">
		<view v-if="videoDetail.id > 0" class="swiper-item">
			<view class="video-view">
				<video :id="'video_'+videoDetail.id" 
				:poster="videoDetail.cover_pic" 
				:src="videoDetail.video_url" 
				:controls="false" 
				object-fit="contain" 
				:muted="muted" 
				@ended="videoPlayEndHandler"
				@play="videoPlayHandler"
				@timeupdate="timeUpdateHandler"></video>
			</view>
			
			<view class="detail">
				<view v-if="videoDetail.extend.enable_link == 1" class="link" @click="openUrl(videoDetail.extend.link)">
					<view>
						<image :src="videoDetail.extend.link_pic" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					<view style="height:100rpx;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
						<view v-line-clamp="2">{{videoDetail.extend.link_title}}</view>
						<view>{{videoDetail.extend.link_desc}}</view>
					</view>
				</view>
				
				<view v-line-clamp="1" style="font-size: 14pt;">{{videoDetail.title}}</view>
				
				<view style="font-size: 10pt;display: flex;justify-content: space-between;">
					<view>
						<text v-if="videoDetail.user_id>1">{{videoDetail.nickname}}</text>
						<text v-else="videoDetail.user_id">@兰亭臻选</text>
					</view>
					<view>{{formatTimeToStr(videoDetail.created_at)}}</view>
				</view>
			</view>
		
			<view class="reward-porgress" v-if="videoDetail.extend.reward" @click="showRewardDetail(videoDetail)">
				<u-circle-progress 
					active-color="#2979ff" 
					:percent="videoDetail.percent ? videoDetail.percent : 0"
					width="110" 
					border-width="5"  
					bg-color="rgba(0,0,0,.5)">
					<view style="color:#fff;text-align: center;">
						<view v-if="videoDetail.extend.reward_status == 0">
							<view style="font-size: 10pt;font-weight: 600;">{{videoDetail.extend.reward_num}}</view>
							<view style="font-size: 8pt;">{{videoDetail.extend.reward_type == 'score' ? '积分' : '余额'}}</view>
						</view>
						<view v-else>
							<view style="font-size: 8pt;">已领</view>
						</view>
					</view>
				</u-circle-progress>
			</view>
			
		</view>
	
	
		<u-popup v-model="rewardDetail.visible" mode="top" closeable @close="rewardDetailClose">
			<view style="height: 100vh;padding-top:100rpx;">
				<h3 style="text-align: center;padding-bottom: 40rpx;" v-line-clamp='1'>短视频观看奖励说明</h3>
				
				<view style="padding: 20rpx;font-weight: 600;">奖励领取信息：</view>
				<view v-if="rewardDetail.videoInfo" style="padding:0 50rpx;">
					<view class="reward-detail-row">
						<view>奖励类型</view>
						<view>{{rewardDetail.videoInfo.extend.reward_type == 'score' ? '积分' : '余额'}}</view>
					</view>
					<view class="reward-detail-row">
						<view>奖励数量</view>
						<view>{{rewardDetail.videoInfo.extend.reward_num}}</view>
					</view>
					<view class="reward-detail-row">
						<view>领取条件</view>
						<view>{{rewardDetail.videoInfo.extend.condition == 1 ? '播放成功' : '播放完成'}}</view>
					</view>
				</view>
		
				
				<view style="padding: 20rpx;">注：奖励会在达成领取条件后的5分钟内进行发放！</view>
				
				<view style="padding: 20rpx;font-weight: 600;text-align: center;">本活动所有解释权归兰亭臻选所有！</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	export default{
		data(){
			return {
				config:{
					enable:0,
					condition:2,
				},
				queryVideoId:'',
				videoDetail:{
					id:0,
					extend:{}
				},
				muted:true,
				playingVideoId:"",
				rewardDetail:{
					visible:false,
					videoInfo:''
				},
			}
		},
		async onLoad(opt){
			
			
			
			if(!opt.video_id){
				this.$http.toast('参数异常，请重试~');
				uni.navigateTo({url:'/plugins/short_video/index'})
				return ;
			}
			this.queryVideoId = opt.video_id ?? '';
			let res = await this.$http.request({
				url: this.$api.short_video.getConfig,
				method: 'get',
			});
			if(res.code !== 0){
				return this.$http.toast(res.msg);
			}
			Object.assign(this.config,res.data);
			if( this.config.enable === 0 ){
				return uni.showModal({
					title:"温馨提示",
					content:"短视频应用已关闭，请稍后再尝试~",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({url:'/pages/index/index'});
						}
					}
				})
			}
			
			// this.getInitVideoList();
			this.getVideoDetail();
		},
		methods:{
			async getVideoDetail(){
				let self = this;
				let res = await self.$http.request({
					url: self.$api.short_video.getVideoDetail,
					method: 'POST',
					data:{id:this.queryVideoId},
					showLoading:true
				});
				if(res.code !== 0){
					return self.$http.toast(res.msg);
				}
				self.videoDetail = res.data;
				//更新分享内容
				this.$wechatSdk.initShareUrl({
					app_share_desc:  self.videoDetail.title,
					app_share_pic: self.videoDetail.cover_pic,
					app_share_title: "短视频"
				}, window.location.protocol + '//' + window.location.host + window.location.pathname + '#/plugins/short_video/video?video_id='+this.queryVideoId);
				setTimeout(function(){
					self.playingVideoId = 'video_' + self.videoDetail.id;
					uni.createVideoContext(self.playingVideoId).play();
					uni.showModal({
						title: '温馨提示',
						content: '当前为静音模式播放，请先关闭静音模式。',
						// cancelText:'保持静音',
						showCancel:false,
						confirmText:'确认',
						success: function (res) {
							if (res.confirm) {
								self.muted = false;
								uni.createVideoContext(self.playingVideoId).play();
							}
						}
					});
				},100)
				
			},
			
			//视频播放的时长信息处理
			timeUpdateHandler(e){
				let cur = e.detail.currentTime;
				let total = e.detail.duration;
				let ratio = Math.round(cur / total * 100);
				this.videoDetail.percent = ratio;
				this.$forceUpdate();
			},
			
			
			async videoPlayEndHandler(e){
				if(this.config.condition != 2){
					return ;
				}
				let videoId = e.target.id;
				let id = videoId.split('_')[1];
				let self = this;
				if(self.videoDetail.id == id){
					if(this.config.reward_limit == 1 && self.videoDetail.extend.reward_status){
						return ;
					}
					let res = await self.$http.request({
						url: self.$api.short_video.videoReward,
						method: 'POST',
						data:{video_id:id},
						showLoading:true
					});
					if(res.code == 0){
						self.videoDetail.extend.reward_status = 1;
					}
				}
			},
			
			async videoPlayHandler(e){
				if(this.config.condition != 1){
					return ;
				}
				
				let videoId = e.target.id;
				let id = videoId.split('_')[1];
				let self = this;
				if(self.videoDetail.id == id){
					if(this.config.reward_limit == 1 && self.videoDetail.extend.reward_status){
						return ;
					}
					let res = await self.$http.request({
						url: self.$api.short_video.videoReward,
						method: 'POST',
						data:{video_id:id},
						showLoading:true
					});
					if(res.code == 0){
						self.videoDetail.extend.reward_status = 1;
					}
				}
			},
	
			openUrl(url){
				const regex = /^https?:\/\//;
				if(regex.test(url)){
					window.location.href = url;
				}else{
					uni.navigateTo({url})
				}
			},
			showRewardDetail(row){
				this.rewardDetail.videoInfo = row;
				this.rewardDetail.visible = true;
			},
			rewardDetailClose(){
				this.rewardDetail.videoInfo = '';
				this.rewardDetail.visible = false;
			}
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			}
		},
	}
</script>

<style lang="scss">
	
	.body{
		width:100vw;
		height: 100vh;
		background-color: #000000;
		overflow: hidden;
		position: relative;
	}
	
	.swiper{
		width: 100vw;
		height: 100vh;
		z-index: 7
	}
	
	.swiper-item{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	
		
	.video-view{
		height: 500px;
		flex-grow: 9;
	}
	.video-view video{
		// width: 100vw;
		// min-height: 80vh;
		width: 100%;
		height: 100%;
	}
	
	.detail{
		min-height: 300rpx;
		color:#ffffff;
		padding: 0rpx 20rpx 30rpx;
		display:flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	
	.link{
		color:#000;
		background-color: #fff;
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
	}
	
	
	.reward-porgress{
		position: fixed; 
		top:50rpx;
		right: 50rpx;
		z-index: 99;
		border-radius: 50%;
		overflow: hidden;
	}
	.reward-detail-row{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #f2f2f2;
		padding: 20rpx 0;
	}
</style>